<template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">
      <!--      功能区域-->
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>
    <!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
    <el-table :data="tableDataS.tableData" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" sortable/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="nickname" label="昵称"/>
      <el-table-column prop="age" label="性别"/>
      <el-table-column prop="sex" label="性别"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button
                  size="mini"
                  type="danger"
              >删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableDataS.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
      <el-dialog
          v-model="dialogVisible"
          title="新增用户"
          width="30%"
          :before-close="handleClose"
      >
        <el-form label-width="120px">
          <el-form-item label="用户名">
            <el-input v-model="user.username" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="user.nickname" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="user.age" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="user.sex" style="width: 80%">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
              <el-radio :label="3">未知</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="地址">
            <el-input type="textarea" v-model="user.address" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save"
        >确定</el-button
        >
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import request from "@/util/request";
import {ElMessage} from 'element-plus'

export default {
  name: 'Book',
  setup() {
    let user = reactive({
      id: "",
      username: "",
      password: "",
      nickname: "",
      age: "",
      sex: "",
      address: "",
    })
    let dialogVisible = ref(false)
    let currentPage4 = ref(1)
    let pageSize = ref(10)
    let search = ref('')

    function handleSizeChange(size) {
      // 改变当前页大小
      pageSize.value = size
      load()
    }

    function handleCurrentChange(num) {
      // 改变当前页码
      currentPage4.value = num
      load()
    }

    const updateSucess = () => {
      ElMessage({
        message: "更新成功",
        grouping: true,
        type: 'success'
      })
    }
    const deleteSucess = () => {
      ElMessage({
        message: "删除成功",
        grouping: true,
        type: 'success'
      })
    }
    const insertSucess = () => {
      ElMessage({
        message: "新增成功",
        grouping: true,
        type: 'success'
      })
    }
    const updateFail = () => {
      ElMessage({
        message: "更新失败",
        grouping: true,
        type: 'error'
      })
    }
    const insertFail = () => {
      ElMessage({
        message: "新增失败",
        grouping: true,
        type: 'error'
      })
    }
    const deleteFail = () => {
      ElMessage({
        message: "删除失败",
        grouping: true,
        type: 'error'
      })
    }
    const tableDataS = reactive({
      tableData: [],
      total: 0
    })
    load()

    function load() {
      request.get("/book/getAll", {
        params: {
          pageNum: currentPage4.value,
          pageSize: pageSize.value,
          key: search.value
        }
      }).then(res => {
        tableDataS.tableData = res.data.content
        tableDataS.total = res.data.totalElements
      })
    }

    function handleEdit(row) {
      user.username = row.username
      user.password = row.password
      user.nickname = row.nickname
      user.age = row.age
      user.sex = row.sex
      user.address = row.address
      user.id = row.id
      dialogVisible.value = true
    }

    function add() {
      dialogVisible.value = true
      Object.keys(user).map(key => {
        delete user[key]
      })
    }

    function save() {
      if (user.id) {
        request.put("/book/updateById", user).then(res => {
          if (res.status === 200) {
            updateSucess()
          } else {
            updateFail()
          }
          load()
          dialogVisible.value = false//关闭弹窗
        })
      } else {
        request.post("/book/create", user).then(res => {
          if (res.status === 200) {
            insertSucess()
          } else {
            insertFail()
          }
          load()
          dialogVisible.value = false//关闭弹窗
        })
      }
    }

    function handleDelete(id) {
      request.delete("/book/deleteById", {
        params: {
          id: id
        }
      }).then(res => {
        if (res.status === 200) {
          deleteSucess()
        } else {
          deleteFail()
        }
        load()
        dialogVisible.value = false//关闭弹窗
      })
    }

    return {
      deleteSucess,
      deleteFail,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
      updateFail,
      insertFail,
      updateSucess,
      insertSucess,
      handleEdit,
      search,
      tableDataS,
      currentPage4,
      dialogVisible,
      user,
      add,
      save,
      pageSize,
      load
    }
  },
}
</script>
